<template>
  <div class="audition262">
    <a href="https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/" target="_blnak" class="a_img">
      <img src="@images/lifecycles1.png" alt="" class="img">
    </a>
    <p>涉及到的声明周期函数：</p>
    <p>1. constructor</p>
    <p>
      如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
    </p>
    <p>
      在constructor中，可以初始化state，比如<br />
      <code class="code">
        this.<span class="color1">state</span> = {<br />
          <span class="indient">name: 'dilireba'</span><br />
        }
      </code>
    </p>
    <p>但是<span class="color">不要</span>在这里使用this.setState来更新状态</p>
    <p>2. static getDerivedStateFromProps(props, state)</p>
    <p>getDerivedStateFromProps 会在调用 render 方法之前调用 , 并且在初始挂载及后续更新时都会被调用</p>
    <p>它应返回一个对象来更新 state，如果返回 null 则不更新任何内容</p>
    <p>它的存在只有一个目的：让组件在 props 变化时更新 state</p>
    <p>3. shouldComponentUpdate(nextProps, nextState)</p>
    <p>根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。</p>
    <p>默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。</p>
    <p>当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true</p>
    <p>首次渲染或使用 forceUpdate() 时不会调用该方法。</p>
    <p>此方法<span class="color">仅</span>作为性能优化的方式而存在</p>
    <p>
      <a href="https://www.runoob.com/react/react-ref-shouldcomponentupdate.html" target="_blank">使用示例</a>
    </p>
    <p>4. render()</p>
    <p>render() 方法是 class 组件中唯一必须实现的方法。</p>
    <p>当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：</p>
    <code class="code">
      <span class="indient">1. React 元素</span><br />
      <span class="indient">2. 数组或 fragments</span><br />
      <span class="indient">3. Portals</span><br />
      <span class="indient">4. 字符串或数值类型</span><br />
      <span class="indient">5. 布尔类型或 null</span>
    </code>
    <p>render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。</p>
    <p>如果 shouldComponentUpdate() 返回 false，则不会调用 render()。</p>
    <p>5. getSnapshotBeforeUpdate(prevProps, prevState)</p>
    <p>不常用，但是有妙用。参考官网：<a href="https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate" target="_blank">getSnapshotBeforeUpdate</a></p>
    <h3><strong>6. componentDidMount()</strong></h3>
    <p>componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用</p>
    <p>这里适合发送请求，操作dom等</p>
    <p>7. componentDidUpdate()</p>
    <p>componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。</p>
    <p>当组件更新后，可以在此处对 DOM 进行操作。</p>
    <p>如果你对更新前后的 props 进行了<span class="color">比较</span>，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。</p>
    <p>如果 shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()。</p>
    <h3><strong>8. componentWillUnmount()</strong></h3>
    <p>componentWillUnmount() 会在组件卸载及销毁之前直接调用。</p>
    <p>在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等</p>
    <p>componentWillUnmount() 中<span class="color">不应</span>调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。</p>
  </div>
</template>

<script>
export default {
  name: 'Audition262'
}
</script>

<style lang="less" scoped>
.a_img {
  display: inline-block;
}
</style>